<template>
  <div class="user-info">
    <van-nav-bar
      title="修改用户资料"
      left-arrow
      @click-left="onClickLeft"
      class="userInfoNav"
    />
    <!-- 头像 -->
    <van-cell-group>
      <van-cell title="头像" is-link>
        <van-uploader v-model="fileList" preview-size="26" :after-read="afterRead"/>
      </van-cell>
      <!-- 昵称 -->
      <van-cell title="昵称" is-link :value="item.username" @click="nicknameShow = true" />
      <van-popup v-model="nicknameShow" position="bottom" :style="{ height: '100%', backgroundColor:'#f5f7f9' }">
        <van-nav-bar
          title="编辑昵称" left-text="取消" right-text="完成" left-arrow
          @click-left="nicknameShow = false"
          @click-right="onClickRight1"
          />
        <van-cell-group>
          <van-field v-model="value" type="textarea" placeholder="请输入昵称" maxlength="7" show-word-limit/>
        </van-cell-group>
      </van-popup>
      <!-- 手机号 -->
      <van-cell title="手机号" is-link :value="item.mobile" @click="mobileShow = true" />
      <van-popup v-model="mobileShow" position="bottom" :style="{ height: '100%', backgroundColor:'#f5f7f9' }">
          <van-nav-bar
            title="编辑手机号" left-text="取消" right-text="完成" left-arrow @click-left=" mobileShow = false"
            @click-right="onClickRight1"
            />
          <van-cell-group>
            <van-field v-model="value" type="textarea" placeholder="请输入手机号" maxlength="11" show-word-limit/>
          </van-cell-group>
      </van-popup>
      <!-- 性别 -->
      <van-cell title="性别" is-link :value="item.sex === 1 ? '男' : '女' " @click="genderShow = true" />
      <van-popup v-model="genderShow" position="bottom" :style="{ height: '40%', backgroundColor:'#f5f7f9' }">
           <van-picker
            title="标题"
            show-toolbar
            :columns="columns"
            @cancel="genderShow = false"
          />
      </van-popup>

      <!-- 出身年月 -->
      <van-cell title="出生年月" is-link :value="item.birthday" @click="birthShow = true" />
      <van-popup v-model="birthShow" position="bottom" :style="{ height: '40%', backgroundColor:'#f5f7f9' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="birthShow = false"
        />
      </van-popup>
      <!-- 家庭住址 -->
      <van-cell title="家庭住址" is-link :value="item.address" @click="homeShow = true"/>
      <van-popup v-model="homeShow" position="bottom" :style="{ height: '100%', backgroundColor:'#f5f7f9' }">
        <van-nav-bar
          title="家庭住址" left-text="取消" right-text="完成" left-arrow
          @click-left="homeShow = false"
          @click-right="onClickRight1"
          />
        <van-cell-group>
          <van-field v-model="value" type="textarea" placeholder="请输入地址" show-word-limit/>
        </van-cell-group>
      </van-popup>
      <!-- 个性签名 -->
      <van-cell title="个性留言" is-link :value="item.notes" @click="sigShow = true"/>
      <van-popup v-model="sigShow" position="bottom" :style="{ height: '100%', backgroundColor:'#f5f7f9' }">
        <van-nav-bar
          title="个性留言" left-text="取消" right-text="完成" left-arrow
          @click-left="sigShow = false"
          @click-right="onClickRight1"
          />
        <van-cell-group>
          <van-field v-model="value" type="textarea" placeholder="请输入签名" maxlength="30" show-word-limit/>
        </van-cell-group>
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import { getUserInfoAPI, updataImgAPI } from '@/api/user'
import { updataImgApi } from '@/api/article'
export default {
  data () {
    return {
      id: this.$route.params.id,
      nicknameShow: false,
      mobileShow: false,
      genderShow: false,
      birthShow: false,
      homeShow: false, // 家庭地址弹出层
      sigShow: false, // 个性留言弹出层
      imgShow: false, // 控制上传图片
      value: '',
      gender: '',
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      columns: ['男', '女'],
      item: {},
      fileList: [], // 存储图片对象
      file: '' // 存图片地址
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight1 () {

    },
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      this.fileList.push = { url: file.content }
      this.file = file.file

      const fd = new FormData()
      fd.append('file', this.file)
      const { data: res } = await updataImgApi(fd)

      await updataImgAPI({
        icon: res.data.savePath,
        id: this.id
      })
    },
    async getUserInfo () {
      const { data } = await getUserInfoAPI()
      this.item = data.data.userInfo
      this.id = data.data.userInfo.id
    }
  },
  // 发送ajax请求
  async created () {
    this.getUserInfo()
  }
}

</script>

<style lang="less" scoped>
.userInfoNav {
  background-color: #1989fa;
  // 导航文字
  /deep/ .van-nav-bar__title {
  color: white;
  font-weight: 500;
  font-size: 0.42667rem;
 }
  //修改箭头颜色
  /deep/ .van-icon-arrow-left {
  color: var(--nav-bar-icon-color, #fff) !important;
 }
}
</style>
